<script>
import { timeFormat } from "@/utils";
import ErrorImage from "@/components/Error-Image";
export default {
  name: "expert-card",
  functional: true,
  render(h, { props: { bgc, company, date, icon, job, name, rate, item } }) {
    return (
      <div class="pd1 flexsb" style={{ "background-color": bgc }}>
        <div class="wh40 br50 bgcommon">
          <ErrorImage src={icon} />
        </div>
        <div class="card-center pl12">
          <div class="pb8">
            {name}
            {item.replySource === 0 ? (
              <span class="left">
                {Array.from({ length: rate }).map(() => (
                  <img src={require("@/assets/icon/wjx-active.png")} />
                ))}
                {Array.from({ length: 5 - rate }).map(() => (
                  <img src={require("@/assets/icon/wjx.png")} />
                ))}
              </span>
            ) : null}
          </div>
          <div class="fz12">
            {item.replySource === 0 ? (
              <div>
                <span class="van-ellipsis">{company}</span>
                <span class="split-line"></span>
                <span class="van-ellipsis">{job}</span>
              </div>
            ) : null}
          </div>
        </div>
        <div class="fz12 date lh20">{timeFormat(date)}</div>
      </div>
    );
  },
  components: {
    ErrorImage,
  },
};
</script>
<style lang="scss" scoped>
.flexsb {
  align-items: flex-end;
}
.left {
  margin-left: 20px;
}
.card-center {
  flex: 1 0 auto;
  height: 100%;
  .van-ellipsis {
    display: inline-block;
    max-width: 70px;
  }
  img {
    width: 15px;
    height: 15px;
  }
}
.fz12 {
  margin-top: 2px;
}
.split-line {
  display: inline-block;
  width: 1px;
  height: 13px;
  margin: 0 12px;
  background-color: #c0c0c05c;
  vertical-align: middle;
}

.d_avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
</style>
